<template>
  <div ref="echarts" style="width: 100%; height: 100%"></div>
  <el-popover
    :visible="visible"
    placement="bottom-right"
    title="配方预测分析"
    :width="600"
    offset="100"
    hide-after="200"
    trigger="click"
    content="系统提供预测模型，根据各品牌执行配方和烟叶库存信息，遵循如优先保障某品牌生产、保障某品牌生产数量、预留某些烟叶不准使用（原料部让售）等原则，计算出不同生产点各品牌当前配方的产量。通过“余缺查询”的功能，为产品维护室的人员及时进行烟叶替换或者配方调整提供预警。"
  />
</template>
  
<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.echarts);
      const gaugeData = [
        {
          value: 20,
          name: "父工单",
          title: {
            offsetCenter: ["0%", "-30%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "-20%"],
          },
        },
        {
          value: 40,
          name: "子工单1",
          title: {
            offsetCenter: ["0%", "0%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "10%"],
          },
        },
        {
          value: 60,
          name: "子工单2",
          title: {
            offsetCenter: ["0%", "30%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "40%"],
          },
        },
        {
          value: 60,
          name: "子工单3",
          title: {
            offsetCenter: ["0%", "60%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "70%"],
          },
        },
      ];
      const option = {
        title: {
          text: "工单完成进度",
          left: "40%",
          top: "10px",
        },
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#464646",
              },
            },
            axisLine: {
              lineStyle: {
                width: 40,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: gaugeData,
            title: {
              fontSize: 12,
            },
            detail: {
              width: 100,
              height: 5,
              fontSize: 10,
              color: "inherit",
              borderColor: "inherit",
              borderRadius: 20,
              borderWidth: 1,
              formatter: "{value}%",
            },
          },
        ],
      };
      setInterval(function () {
        gaugeData[0].value = +(Math.random() * 100).toFixed(2);
        gaugeData[1].value = +(Math.random() * 100).toFixed(2);
        gaugeData[2].value = +(Math.random() * 100).toFixed(2);
        gaugeData[3].value = +(Math.random() * 100).toFixed(2);
        myChart.setOption({
          series: [
            {
              data: gaugeData,
              pointer: {
                show: false,
              },
            },
          ],
        });
      }, 2000);
      myChart.setOption(option);
    },
  },
};
</script>
  